<template>
  <div class="life-detail common-mobile-view">
    <span class="title">{{ travelStore.currentTravelSpot.name }}</span>

    <section>
      <div class="info-container">
        <travel-basic-data/>

        <travel-guide-data/>
      </div>

      <div class="record-container card-item">
        <travel-record-data/>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useTravelStore } from '@/store/travel.ts'
import { useRoute } from 'vue-router'
import TravelBasicData from '@/components/Travel/Data/TravelBasicData.vue'
import TravelGuideData from '@/components/Travel/Data/TravelGuideData.vue'
import TravelRecordData from '@/components/Travel/Data/TravelRecordData.vue'
import { onMounted } from 'vue'

const travelStore = useTravelStore()
const route = useRoute()

onMounted(() => {
  travelStore.queryTravelSpot(route.params.id as number)
})
</script>

<style lang="scss">
@use "@/styles/home/life.detail.module";
</style>
